<template>
	<div class="product-cate-cascader">
		<el-cascader v-model="cascader_value" :options="product_tree_cates" :props="cascader_props" clearable
			@change="on_cascader_change"></el-cascader>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		name: "product-cate-cascader",
		components: {

		},
		props: [""],
		data() {
			return {
				product_tree_cates: [],
				product_flat_cates: [],
				cascader_props: {
					value: 'id',
					label: 'title',
					children: 'child',
					multiple: true,
					checkStrictly: true
				},

				cascader_value: ''
			};
		},
		computed: {

		},
		watch: {

		},
		created() {
			this.query_product_cate()
		},
		methods: {
			init(value) {
				this.cascader_value = value
			},

			query_product_cate() {
				this.$api({
					url: '/admin_service.php',
					method: 'get',
					data: {
						action: "product_getProductChannelList",
					}
				}).then((res) => {
					if (res.code == 200) {
						this.product_tree_cates = res.data.list;
						this.product_flat_cates = this.getFlatFromTree(this.product_tree_cates)
						this.$log('所有产品分类', this.product_flat_cates)
					}
				})
			},

			getFlatFromTree(treeList, flat_list = []) {
				treeList.forEach(v => {
					flat_list.push(v);
					if (v.child && v.child.length) {
						flat_list.push(...v.child)
						this.getFlatFromTree(v.child, flat_list)
					}
				})

				return flat_list
			},


			on_cascader_change(value) {
				let cate_list = []
				let cate_title_list = []
				value.forEach(id_arr => {
					let id = id_arr[0]
					let cate = this.product_flat_cates.find(v => v.id == id)
					cate_list.push(cate)
					cate_title_list.push(cate.title)
				})

				let info = {
					value: value,
					cate_list: cate_list,
					cate_title_list: cate_title_list,
				}
				this.$log('级联选择器 value', value)
				this.$log('级联选择器 info', info)
				this.$emit('confirm', info)
			}
		},
	};
</script>

<style scoped lang="less">
	.el-cascader {
		width: 100%;
	}
</style>